Ξεκλειδώνοντας την Αποδοτικότητα με το CSS Extend: Εξοικείωση με την Κληρονομικότητα Στυλ για Επεκτάσιμο Σχεδιασμό

Στον συνεχώς εξελισσόμενο κόσμο της ανάπτυξης ιστοσελίδων, η συγγραφή αποδοτικού και συντηρήσιμου CSS είναι υψίστης σημασίας. Καθώς τα έργα αυξάνονται σε πολυπλοκότητα, η ανάγκη για ένα ισχυρό σύστημα διαχείρισης στυλ γίνεται όλο και πιο κρίσιμη. Ένα ισχυρό εργαλείο στο οπλοστάσιο CSS σας είναι η έννοια του "Extend", το οποίο διευκολύνει την κληρονομικότητα στυλ και προωθεί την επαναχρησιμοποίηση κώδικα. Αυτό το άρθρο εμβαθύνει στον κανόνα CSS Extend, διερευνώντας την εφαρμογή, τα οφέλη και τις βέλτιστες πρακτικές για την κατασκευή επεκτάσιμων και συντηρήσιμων σχεδιασμών.

Τι είναι το CSS Extend;

Το CSS Extend, που σχετίζεται κυρίως με προεπεξεργαστές CSS όπως το Sass και το Less, παρέχει έναν μηχανισμό για την κληρονομιά στυλ από έναν επιλογέα σε έναν άλλο. Σε αντίθεση με την παραδοσιακή κληρονομικότητα CSS, η οποία εφαρμόζει στυλ κάτω από το δέντρο DOM, το Extend σάς επιτρέπει να επαναχρησιμοποιήσετε ρητά τους υπάρχοντες κανόνες στυλ μέσα στην κωδικοποίησή σας CSS. Αυτό οδηγεί σε καθαρότερο, πιο οργανωμένο και λιγότερο επαναλαμβανόμενο CSS.

Ενώ το εγγενές CSS δεν έχει άμεσο ισοδύναμο με την οδηγία `@extend` του Sass ή του Less, οι αρχές της επαναχρησιμοποίησης και της σύνθεσης στυλ μπορούν να επιτευχθούν μέσω άλλων μέσων, όπως μεταβλητές CSS, mixins (μέσω προεπεξεργαστών) και την ίδια την αλληλουχία. Θα εξερευνήσουμε πώς αυτές οι έννοιες σχετίζονται με το παράδειγμα Extend.

Γιατί να χρησιμοποιήσετε το CSS Extend;

• Μειώνει την Επανάληψη Κώδικα: Το Extend ελαχιστοποιεί το περιττό CSS επιτρέποντάς σας να κληρονομήσετε στυλ από υπάρχοντες κανόνες, μειώνοντας το συνολικό μέγεθος των φύλλων στυλ σας.
• Βελτιώνει τη Συντηρησιμότητα: Όταν χρειάζεται να τροποποιήσετε ένα στυλ, χρειάζεται να το αλλάξετε μόνο σε ένα μέρος και όλοι οι επιλογείς που το επεκτείνουν θα κληρονομήσουν αυτόματα την αλλαγή. Αυτό απλοποιεί τη συντήρηση και μειώνει τον κίνδυνο ασυνεπειών.
• Βελτιώνει την Οργάνωση: Δημιουργώντας μια σαφή ιεραρχία στυλ, το Extend βοηθά στην οργάνωση του CSS σας και το καθιστά ευκολότερο στην κατανόηση και την πλοήγηση.
• Προωθεί την Επεκτασιμότητα: Καθώς το έργο σας μεγαλώνει, το Extend σάς επιτρέπει να δημιουργήσετε μια αρθρωτή και επεκτάσιμη αρχιτεκτονική CSS, διασφαλίζοντας ότι τα στυλ σας παραμένουν διαχειρίσιμα και αποδοτικά.

Εφαρμογή με Sass

Το Sass παρέχει την οδηγία `@extend`, η οποία σας επιτρέπει να κληρονομήσετε τα στυλ ενός επιλογέα σε έναν άλλο. Ακολουθεί ένα βασικό παράδειγμα:

            .button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.primary-button {
  @extend .button;
  background-color: #28a745;
}

            

              
                Copy
              
            
          

Σε αυτό το παράδειγμα, το `.primary-button` κληρονομεί όλα τα στυλ από το `.button` και στη συνέχεια αντικαθιστά το `background-color`. Το μεταγλωττισμένο CSS θα μοιάζει κάπως έτσι:

            .button, .primary-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.primary-button {
  background-color: #28a745;
}

            

              
                Copy
              
            
          

Επιλογείς κράτησης θέσης

Το Sass προσφέρει επίσης επιλογείς κράτησης θέσης (`%`), οι οποίοι έχουν σχεδιαστεί ειδικά για χρήση με το `@extend`. Οι επιλογείς κράτησης θέσης δεν μεταγλωττίζονται σε CSS εκτός εάν επεκταθούν από έναν άλλο επιλογέα. Αυτό είναι χρήσιμο για τη δημιουργία βασικών στυλ που δεν θέλετε να εφαρμόσετε απευθείας σε κανένα στοιχείο.

            %base-heading {
  font-family: sans-serif;
  font-weight: bold;
}

h1 {
  @extend %base-heading;
  font-size: 2em;
}

h2 {
  @extend %base-heading;
  font-size: 1.5em;
}

            

              
                Copy
              
            
          

Εφαρμογή με Less

Το Less παρέχει μια παρόμοια λειτουργικότητα χρησιμοποιώντας την ψευδο-κλάση `:extend()`. Δείτε πώς μπορείτε να επιτύχετε το ίδιο αποτέλεσμα με το παραπάνω παράδειγμα Sass:

            .button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.primary-button:extend(.button) {
  background-color: #28a745;
}

            

              
                Copy
              
            
          

Το μεταγλωττισμένο CSS θα είναι παρόμοιο με το παράδειγμα Sass, με το `.button` και το `.primary-button` να μοιράζονται τα κοινά στυλ.

Μεταβλητές CSS και η Αλληλουχία ως Εναλλακτικές

Ενώ το Sass και το Less προσφέρουν ρητές οδηγίες Extend, το σύγχρονο CSS παρέχει εναλλακτικούς μηχανισμούς για την επίτευξη παρόμοιων αποτελεσμάτων, ειδικά σε απλούστερα σενάρια. Οι μεταβλητές CSS (προσαρμοσμένες ιδιότητες) και μια βαθιά κατανόηση της αλληλουχίας μπορούν να μειώσουν σημαντικά την επανάληψη κώδικα.

Μεταβλητές CSS

Οι μεταβλητές CSS σάς επιτρέπουν να ορίσετε επαναχρησιμοποιήσιμες τιμές που μπορούν να εφαρμοστούν σε όλο το φύλλο στυλ σας. Ενώ δεν κληρονομούν άμεσα στυλ με τον ίδιο τρόπο όπως το `@extend`, παρέχουν έναν ισχυρό τρόπο διαχείρισης κοινόχρηστων τιμών. Για παράδειγμα:

            :root {
  --button-padding: 10px 20px;
  --button-border: none;
  --button-radius: 5px;
  --button-background: #007bff;
  --button-color: white;
}

.button {
  padding: var(--button-padding);
  border: var(--button-border);
  border-radius: var(--button-radius);
  background-color: var(--button-background);
  color: var(--button-color);
  cursor: pointer;
}

.primary-button {
  padding: var(--button-padding);
  border: var(--button-border);
  border-radius: var(--button-radius);
  background-color: #28a745;
  color: var(--button-color);
  cursor: pointer;
}

            

              
                Copy
              
            
          

Σε αυτήν την περίπτωση, η αλλαγή της τιμής της μεταβλητής αλλάζει όλες τις περιπτώσεις όπου χρησιμοποιείται η μεταβλητή, παρέχοντας μια μορφή κεντρικού ελέγχου παρόμοια με το extend. Εξετάστε την ακόλουθη παραλλαγή:

            :root {
  --base-button-style: {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
  }
}

.button {
  --button-background: #007bff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: var(--button-background);
  color: white;
  cursor: pointer;
}

.primary-button {
  --button-background: #28a745;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: var(--button-background);
  color: white;
  cursor: pointer;
}

            

              
                Copy
              
            
          

Ο προηγούμενος κώδικας δεν λειτουργεί. Οι μεταβλητές CSS δεν μπορούν να περιέχουν πολλές ιδιότητες CSS όπως αυτή. Είναι σημαντικό να θυμάστε ότι οι μεταβλητές CSS περιέχουν μόνο μία τιμή ιδιότητας.

Η Αλληλουχία

Η ίδια η αλληλουχία είναι μια μορφή κληρονομικότητας. Εφαρμόζοντας στρατηγικά στυλ σε γονικά στοιχεία, μπορείτε να δημιουργήσετε ένα βασικό σύνολο στυλ που κληρονομούνται από τα παιδιά τους. Αυτό μπορεί να συνδυαστεί με μεταβλητές CSS για να δημιουργηθεί ένα ευέλικτο και συντηρήσιμο σύστημα.

Βέλτιστες Πρακτικές για τη Χρήση του CSS Extend

• Χρήση Επιλογέων Κράτησης Θέσης: Όταν δημιουργείτε βασικά στυλ, χρησιμοποιήστε επιλογείς κράτησης θέσης (`%` στο Sass) για να αποτρέψετε τη μεταγλώττισή τους απευθείας σε CSS.
• Αποφυγή Υπερβολικής Επέκτασης: Η εκτεταμένη επέκταση στυλ μπορεί να οδηγήσει σε σύνθετο και δύσκολο στην κατανόηση CSS. Χρησιμοποιήστε το Extend με φειδώ και εξετάστε εναλλακτικές προσεγγίσεις όπως τα mixins ή οι μεταβλητές CSS όταν είναι απαραίτητο.
• Διατήρηση μιας Σαφούς Ιεραρχίας: Οργανώστε το CSS σας με λογικό τρόπο, με τα βασικά στυλ στην κορυφή και πιο συγκεκριμένα στυλ να τα επεκτείνουν. Αυτό θα κάνει το CSS σας ευκολότερο στην πλοήγηση και τη συντήρηση.
• Να είστε Προσεκτικοί με την Ειδικότητα: Το Extend μπορεί να επηρεάσει την ειδικότητα του CSS. Βεβαιωθείτε ότι τα εκτεταμένα στυλ σας έχουν την επιθυμητή ειδικότητα για να αποφύγετε απροσδόκητη συμπεριφορά.
• Εξετάστε τα Mixins: Τα Mixins (που παρέχονται από προεπεξεργαστές) προσφέρουν μια εναλλακτική λύση στο Extend που μερικές φορές μπορεί να είναι πιο ευέλικτη, ειδικά όταν ασχολείστε με στυλ με παραμέτρους.
• Τεκμηριώστε τον Κώδικά σας: Τεκμηριώστε ξεκάθαρα το CSS σας, συμπεριλαμβανομένων των επιλογέων που επεκτείνουν ποιον, για να διευκολύνετε άλλους προγραμματιστές (και τον μελλοντικό σας εαυτό) να κατανοήσουν τον κώδικά σας.

Πιθανά Εμπόδια και Σκέψεις

• Ζητήματα Ειδικότητας: Το `@extend` μπορεί μερικές φορές να οδηγήσει σε απροσδόκητα ζητήματα ειδικότητας εάν δεν χρησιμοποιηθεί προσεκτικά. Η κατανόηση της ειδικότητας CSS είναι ζωτικής σημασίας όταν εργάζεστε με το `@extend`. Όταν ένας κανόνας επεκτείνει έναν άλλο, οι επιλογείς ομαδοποιούνται, αλλάζοντας δυνητικά την ειδικότητα των κανόνων που μπορεί να μην είναι άμεσα εμφανείς. Να ελέγχετε πάντα διεξοδικά μετά την εφαρμογή του `extend`, ειδικά σε μεγάλα έργα.
• Αυξημένο Μέγεθος Αρχείου: Ενώ το `@extend` στοχεύει στη μείωση της πλεονασμού, μπορεί, σε ορισμένες περιπτώσεις, να *αυξήσει* το τελικό μέγεθος του αρχείου CSS. Αυτό συμβαίνει όταν ένας heavily extended selector χρησιμοποιείται σε πολλά σημεία. Ο μεταγλωττιστής αντιγράφει τα κληρονομημένα στυλ σε πολλούς επιλογείς, οδηγώντας σε διπλασιασμό που υπερβαίνει την αρχική εξοικονόμηση. Αναλύστε το μεταγλωττισμένο CSS σας για να βεβαιωθείτε ότι το `@extend` μειώνει πραγματικά το μέγεθος του αρχείου, δεν το αυξάνει.
• Απροσδόκητες Παρενέργειες: Όταν ένας επιλογέας επεκτείνεται, ουσιαστικά γίνεται μέρος κάθε επιλογέα που κληρονομεί από αυτόν. Αυτό μπορεί να προκαλέσει απροσδόκητες παρενέργειες εάν τα κληρονομημένα στυλ δεν εξεταστούν προσεκτικά στο πλαίσιο των επιλογέων επέκτασης. Να ελέγχετε πάντα διεξοδικά και να γνωρίζετε τις πιθανές συγκρούσεις στυλ.
• Πολυπλοκότητα Αποσφαλμάτωσης: Η αποσφαλμάτωση CSS που χρησιμοποιεί εκτενώς το `@extend` μπορεί να είναι πιο περίπλοκη από την αποσφαλμάτωση παραδοσιακού CSS. Η ανίχνευση της προέλευσης ενός συγκεκριμένου στυλ μπορεί να απαιτήσει πλοήγηση σε πολλά επίπεδα κληρονομικότητας, κάτι που μπορεί να είναι χρονοβόρο και συγκεχυμένο. Χρησιμοποιήστε αποτελεσματικά τα εργαλεία προγραμματιστή του προγράμματος περιήγησης και τους χάρτες προέλευσης CSS για να βοηθήσετε στην αποσφαλμάτωση.
• Ανησυχίες Συντηρησιμότητας με την Υπερβολική Χρήση: Ενώ το `@extend` μπορεί να βελτιώσει τη συντηρησιμότητα όταν χρησιμοποιείται σωστά, η υπερβολική χρήση του μπορεί να δημιουργήσει έναν μπερδεμένο ιστό εξαρτήσεων που καθιστά το CSS πιο δύσκολο στην κατανόηση και την τροποποίηση. Προσπαθήστε για μια ισορροπία μεταξύ της επαναχρησιμοποίησης και της σαφήνειας του κώδικα.

Extend vs. Mixins: Επιλογή του Κατάλληλου Εργαλείου

Τόσο το Extend όσο και τα mixins (διαθέσιμα σε προεπεξεργαστές όπως το Sass και το Less) προσφέρουν τρόπους επαναχρησιμοποίησης κώδικα CSS, αλλά διαφέρουν στην προσέγγισή τους και είναι κατάλληλα για διαφορετικά σενάρια.

Extend

• Μηχανισμός: Κληρονομεί το *ολόκληρο* σύνολο στυλ από έναν άλλο επιλογέα. Ουσιαστικά ομαδοποιεί τους επιλογείς στο μεταγλωττισμένο CSS.
• Περιπτώσεις Χρήσης: Ιδανικό για κοινή χρήση βασικών στυλ σε πολλά στοιχεία όπου θέλετε σημασιολογικές συνδέσεις (π.χ., διαφορετικοί τύποι κουμπιών που μοιράζονται βασικό στυλ). Καλύτερα κατάλληλο όταν θέλετε όλες τις ιδιότητες της εκτεταμένης κλάσης, χωρίς τροποποίηση.
• Μεταγλωττισμένη Έξοδος: Γενικά παράγει μικρότερο CSS από τα mixins όταν χρησιμοποιείται αποτελεσματικά, λόγω λιγότερης επανάληψης κώδικα.

Mixins

• Μηχανισμός: Περιλαμβάνει ένα *αντίγραφο* των κανόνων CSS εντός του mixin στον επιλογέα όπου χρησιμοποιείται. Επιτρέπει παραμέτρους (ορίσματα) για την προσαρμογή των συμπεριλαμβανόμενων στυλ.
• Περιπτώσεις Χρήσης: Κατάλληλο για επαναχρησιμοποιήσιμα κομμάτια κώδικα που θέλετε να εφαρμόσετε σε πολλά στοιχεία με μικρές παραλλαγές. Εξαιρετικό για προθέματα προμηθευτή, σύνθετους υπολογισμούς και στυλ με παραμέτρους (π.χ., δημιουργία διαφορετικών πλάτων στηλών πλέγματος).
• Μεταγλωττισμένη Έξοδος: Μπορεί να οδηγήσει σε μεγαλύτερα αρχεία CSS λόγω επανάληψης κώδικα, ειδικά εάν το mixin περιέχει πολλούς κανόνες και χρησιμοποιείται συχνά.

Πότε να Χρησιμοποιήσετε Ποιο;

• Χρησιμοποιήστε το Extend όταν: Θέλετε να δημιουργήσετε μια σημασιολογική σχέση μεταξύ στοιχείων, να μοιραστείτε κοινά βασικά στυλ *χωρίς* τροποποίηση και η βελτιστοποίηση για μικρότερο μέγεθος αρχείου είναι προτεραιότητα.
• Χρησιμοποιήστε τα Mixins όταν: Πρέπει να συμπεριλάβετε επαναχρησιμοποιήσιμα αποσπάσματα κώδικα με παραλλαγές, να χειριστείτε προθέματα προμηθευτών, να εκτελέσετε σύνθετους υπολογισμούς ή να προσαρμόσετε τα συμπεριλαμβανόμενα στυλ χρησιμοποιώντας παραμέτρους.

Μερικές φορές, ένας συνδυασμός τόσο του Extend όσο και των mixins είναι η πιο αποτελεσματική προσέγγιση. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε το Extend για να καθορίσετε βασικά στυλ και, στη συνέχεια, να χρησιμοποιήσετε mixins για να προσθέσετε συγκεκριμένες παραλλαγές ή βελτιώσεις.

Καθολικά Παραδείγματα και Σκέψεις

Οι αρχές του CSS Extend και της επαναχρησιμοποίησης στυλ είναι καθολικά εφαρμόσιμες σε διαφορετικές περιοχές και πολιτισμούς. Ωστόσο, όταν σχεδιάζετε για ένα παγκόσμιο κοινό, είναι απαραίτητο να λάβετε υπόψη:

• Τυπογραφία: Διαφορετικές γλώσσες απαιτούν διαφορετικές οικογένειες και μεγέθη γραμματοσειρών. Χρησιμοποιήστε μεταβλητές CSS ή mixins για να διαχειριστείτε τις ρυθμίσεις τυπογραφίας με βάση τη γλώσσα του περιεχομένου. Για παράδειγμα, ένας ιστότοπος που υποστηρίζει τόσο τα αγγλικά όσο και τα αραβικά μπορεί να χρησιμοποιεί διαφορετικά μεγέθη γραμματοσειρών για τις επικεφαλίδες για να φιλοξενήσει τα οπτικά χαρακτηριστικά κάθε γραφής.
• Διάταξη: Ορισμένες γλώσσες, όπως τα αραβικά και τα εβραϊκά, γράφονται από δεξιά προς τα αριστερά (RTL). Χρησιμοποιήστε λογικές ιδιότητες CSS (π.χ., `margin-inline-start` αντί για `margin-left`) και χαρακτηριστικά κατεύθυνσης (`dir="rtl"`) για να βεβαιωθείτε ότι η διάταξή σας προσαρμόζεται σωστά στις γλώσσες RTL. Το CSS Extend μπορεί να χρησιμοποιηθεί για την κοινή χρήση κοινών στυλ διάταξης, ενώ παράλληλα επιτρέπει συγκεκριμένες αντικαταστάσεις RTL.
• Χρώμα: Τα χρώματα μπορεί να έχουν διαφορετικές πολιτιστικές συσχετίσεις σε διαφορετικά μέρη του κόσμου. Να έχετε υπόψη αυτές τις συσχετίσεις όταν επιλέγετε χρώματα για τον ιστότοπό σας. Για παράδειγμα, το λευκό συνδέεται με το πένθος σε ορισμένους ασιατικούς πολιτισμούς, ενώ συχνά συνδέεται με την αγνότητα και τον εορτασμό στους δυτικούς πολιτισμούς.
• Εικονίδια: Βεβαιωθείτε ότι τα εικονίδιά σας είναι πολιτιστικά κατάλληλα και δεν προσβάλλουν ή αποκλείουν ακούσια χρήστες από διαφορετικές περιοχές. Αποφύγετε τη χρήση συμβόλων που μπορεί να έχουν διαφορετικές έννοιες σε διαφορετικούς πολιτισμούς.
• Προσβασιμότητα: Ακολουθήστε τις οδηγίες προσβασιμότητας (WCAG) για να βεβαιωθείτε ότι ο ιστότοπός σας είναι χρησιμοποιήσιμος από άτομα με αναπηρίες. Αυτό περιλαμβάνει την παροχή εναλλακτικού κειμένου για εικόνες, τη χρήση κατάλληλου σημασιολογικού HTML και τη διασφάλιση ότι ο ιστότοπός σας είναι πλοηγήσιμος χρησιμοποιώντας ένα πληκτρολόγιο.

Παράδειγμα:

Φανταστείτε μια παγκόσμια πλατφόρμα ηλεκτρονικού εμπορίου που πουλά προϊόντα τόσο στην Ευρώπη όσο και στην Ασία. Η πλατφόρμα χρησιμοποιεί το CSS Extend για να δημιουργήσει ένα βασικό στυλ κουμπιού, αλλά στη συνέχεια χρησιμοποιεί mixins για να προσαρμόσει τα χρώματα του κουμπιού με βάση την περιοχή. Στην Ευρώπη, το κύριο χρώμα του κουμπιού είναι μπλε, ενώ στην Ασία είναι πράσινο, αντανακλώντας διαφορετικές προτιμήσεις και συσχετίσεις χρωμάτων σε αυτές τις περιοχές.

            // Base button style
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
}

// Mixin for setting button background color
@mixin button-background-color($color) {
  background-color: $color;
}

// European button style
.european-button {
  @extend .button;
  @include button-background-color(#007bff); // Blue
}

// Asian button style
.asian-button {
  @extend .button;
  @include button-background-color(#28a745); // Green
}

            

              
                Copy
              
            
          

Συμπέρασμα

Το CSS Extend είναι μια ισχυρή τεχνική για τη συγγραφή αποδοτικού, συντηρήσιμου και επεκτάσιμου CSS. Κατανοώντας τις αρχές και τις βέλτιστες πρακτικές του, μπορείτε να δημιουργήσετε μια πιο οργανωμένη και διαχειρίσιμη βάση κώδικα CSS. Ενώ το εγγενές CSS δεν προσφέρει ένα άμεσο ισοδύναμο `@extend`, έννοιες όπως οι μεταβλητές CSS και η στρατηγική αλληλουχία μπορούν να βοηθήσουν στην επίτευξη παρόμοιων αποτελεσμάτων. Θυμηθείτε να λάβετε υπόψη τις συγκεκριμένες ανάγκες του έργου σας και τα πλεονεκτήματα και τις αδυναμίες κάθε προσέγγισης όταν επιλέγετε το κατάλληλο εργαλείο για τη δουλειά. Όταν σχεδιάζετε για ένα παγκόσμιο κοινό, να έχετε πάντα υπόψη τις πολιτισμικές διαφορές και να διασφαλίζετε ότι ο ιστότοπός σας είναι προσβάσιμος και χωρίς αποκλεισμούς για όλους τους χρήστες. Αγκαλιάστε τη δύναμη του CSS Extend (ή των εναλλακτικών του) για να ξεκλειδώσετε την αποδοτικότητα και να δημιουργήσετε έναν καλύτερο ιστό.

Περαιτέρω Ανάγνωση

• Τεκμηρίωση Sass: https://sass-lang.com/documentation/at-rules/extend
• Τεκμηρίωση Less: https://lesscss.org/features/#extend-feature
• MDN Web Docs για Μεταβλητές CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/var()
• Web Accessibility Initiative (WAI): https://www.w3.org/WAI/